<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TZ-追梦</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #header{
            height: 315px;
            background: url(images/snow-bg.png) repeat-y center 0,url(images/header-bg.png);
            animation: auto 6s linear infinite;
        }

        @keyframes auto {
            from{ background-position: center 0,0 0 }
            to{ background-position: center 450px,0 0 }
        }

        @keyframes play {
            from{ transform: translateY(-315px) }
            to{ transform: translateY(0) }
        }


        #header .con{
            width: 960px;
            height: 100%;
            background: url(images/con-bg.png) no-repeat 0 204px;
            margin: 0 auto;
            position: relative;
        }
        #header .con .tree,#header .con .ice{
            animation: play;
        }

        #header .con .tree{
            width: 112px;
            height: 137px;
            background: url(images/tree.png);
            position: absolute;
        }
        #header .con .tree1{
            left: 35px;
            top: 169px;
            animation-duration: 0.2s;
        }
        #header .con .tree2{
            left: 200px;
            top: 180px;
            animation-duration: 0.4s;
        }
        #header .con .tree3{
            left: 350px;
            top: 125px;
            animation-duration: 0.6s;
        }
        #header .con .tree4{
            left: 515px;
            top: 150px;
            animation-duration: 0.8s;
        }
        #header .con .tree5{
            left: 680px;
            top: 170px;
            animation-duration: 0.9s;
        }
        #header .con .tree6{
            left: 805px;
            top: 125px;
            animation-duration: 1s;
        }
        #header .con .ice{
            position: absolute;
            left: 410px;
            top: 210px;
            width: 115px;
            height: 103px;
            background: url("images/ice.png");
            animation-duration: 1.5s;
        }
    </style>
</head>
<body>
    <div id="header">
        <div class="con">
            <div class="tree tree1"></div>
            <div class="tree tree2"></div>
            <div class="tree tree3"></div>
            <div class="ice"></div>
            <div class="tree tree4"></div>
            <div class="tree tree5"></div>
            <div class="tree tree6"></div>
        </div>
    </div>
</body>
</html>